var swiperTab;
$(function () {
    postJSON("/api/carouselImage", {}, function (res) {
        $.each(res, function (index, item) {
            var html = $('<div class="swiper-slide"> <img src="' + item.pic + '"> </div>')
            $(".swiper-wrap-main").append(html);
        })
    })

    postJSON("/api/product_category", {}, function (res) {
        $.each(res, function (index, item) {
            var html = $('<li class="tab-item">\n' +
                '                        <a data-index="' + index + '">\n' +
                '                            <h3>' + item.title + '</h3>\n' +
                '                            <div class="tab-tag">'+item.name+'</div>\n' +
                '                            <div class="tab-tag">'+item.type+'</div>\n' +
                '                        </a>\n' +
                '                    </li>')
            $(".tab-main").append(html);
        })
        $(".tab-wrap ul.tab-main > li.tab-item a").eq(0).addClass('active-tab');
    })


    var swiper = new Swiper("#swiper-banner", {
        autoplay: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

    swiperTab = new Swiper("#swiperTab", {
        autoplay: true,
        allowTouchMove: false,
        preventClicksPropagation: false,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        on: {
            slideChange: function () {
                var index = this.activeIndex;
                console.log(index);
                $(".tab-wrap ul.tab-main > li.tab-item a").eq(index).addClass("active-tab").parent().siblings().children().removeClass("active-tab");
            },
        },
    });

})

//动态点击事件
$(document).on('click', '.tab-wrap ul.tab-main > li.tab-item a',function(){
    console.log($(this).data("index"))
    $(this).addClass("active-tab").parent().siblings().children().removeClass("active-tab");
    swiperTab.slideTo($(this).data("index"));
});



